<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% String path = request.getContextPath();%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html class="app">
<!-- 页面顶部 -->
<c:import url="/admin/commonHeader.html" />
<body class="">
	<section class="vbox">
		
		<!-- 页面顶部布局 -->
		<c:import url="/admin/headerPage.html" />
		<!--/页面顶部布局 -->
		
		<section>
			<section class="hbox stretch">
			
				<!-- 页面顶部布局 -->
				<c:import url="/admin/leftPage.html" />
				<!--/页面顶部布局 -->
	
				<section id="content">
					 <section class="hbox stretch">
        <section id="content">
          <section class="vbox">
            <section class="scrollable wrapper">
              <div class="panel b-a">
                <div class="panel-heading b-b">World Map</div>
                <div class="panel-body">
                  <div class="h3 m-b font-thin">World Map with information</div>
                  <p class="m-b-lg text-muted">This map is based on data available at <a href="http://www.naturalearthdata.com/downloads/110m-cultural-vectors/110m-admin-0-countries/">http://www.naturalearthdata.com</a>. Data is in <a href="http://www.naturalearthdata.com/about/terms-of-use/">public domain</a>.</p>
                  <div class="row">
                    <div class="col-sm-8">                      
                      <div id="world_map" style="height:240px;">                        

                      </div>
                      <div class="m-t-xl m-b clearfix">
                        <i class="i i-local i-2x text-info pull-left m-r m-l m-t-xs"></i>
                        <div class="clear text-sm">
                          Countries distinguish between metropolitan (homeland) and independent and semi-independent portions of sovereign states.
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="h4 m-b font-thin">Statistics</div>
                      <p class="m-b-xs">Population growth</p>
                      <div class="progress progress-xs">
                        <div class="progress-bar bg-primary" data-toggle="tooltip" data-original-title="80%" style="width: 80%"></div>
                      </div>
                      <p class="m-b-xs">Desertification</p>
                      <div class="progress progress-xs">
                        <div class="progress-bar bg-success" data-toggle="tooltip" data-original-title="60%" style="width: 60%"></div>
                      </div>
                      <p class="m-b-xs">Natural Disasters</p>
                      <div class="progress progress-xs">
                        <div class="progress-bar bg-warning" data-toggle="tooltip" data-original-title="70%" style="width: 70%"></div>
                      </div>
                      <p class="m-b-xs">World Forest</p>
                      <div class="progress progress-xs">
                        <div class="progress-bar bg-dark lter" data-toggle="tooltip" data-original-title="50%" style="width: 50%"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="panel b-a">
                <div class="panel-heading b-b">USA Map</div>
                <div class="panel-body">
                  <div class="h3 m-b font-thin">Map with selection</div>
                  <p class="m-b-lg text-muted">This map is based on data available at <a href="http://www.naturalearthdata.com/downloads/10m-cultural-vectors/10m-admin-1-states-provinces/">http://www.naturalearthdata.com</a>. Data is in <a href="http://www.naturalearthdata.com/about/terms-of-use/">public domain</a>.</p>
                  <div class="row m-b-xl">
                    <div class="col-sm-8">                      
                      <div id="usa_map" style="height:240px;">                        

                      </div>                      
                    </div>
                    <div class="col-sm-4">
                      <div class="h4 m-b font-thin">Statistics</div>
                      <p>Internal administrative boundaries</p>
                      <div>
                        <div class="inline text-center">
                          <div class="easypiechart" data-percent="60" data-bar-color="#fcc633" data-line-width="4" data-loop="false" data-scale-color="#fff" data-rotate="0" data-size="100">
                            <div>
                              <span class="step">60</span>%
                            </div>
                          </div>
                          <p class="text-warning font-bold">data</p>
                        </div>
                        <div class="inline text-center">
                          <div class="easypiechart" data-percent="35" data-bar-color="#177bbb" data-line-width="4" data-loop="false" data-scale-color="#fff" data-rotate="0" data-size="100">
                            <div>
                              <span class="step">35</span>%
                            </div>
                          </div>
                          <p class="text-primary font-bold">info</p>
                        </div> 
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>
      </section>
		</section>
		</section>
		</section>
		</section>
	
	<!-- 页面底部布局 -->
	<c:import url="/admin/commonFooter.html" />
	 <script src="<%=path%>/musik/js/charts/easypiechart/jquery.easy-pie-chart.js"></script>
	<!--/页面底部布局 -->
		
</body>
</html>